En este jsfiddle, si intenta ingresar algunos números en el campo de entrada, intente "ctrl + A" y elimine lo que ingresó, O intente usar el botón "del" (eliminar), el comportamiento esperado para eliminar el contenido no se produce. ¿Alguna idea de por qué? Siento que necesito decirle al valor de expresión regular en el método replace () que no incluya "ctrl" (o comando en una Mac) o "del", pero no estoy seguro de cómo implementarlo.
jsfiddle: http://jsfiddle.net/eujzh10n/2/
<div id="u22" class="ax_text_field"> <input id="u22_input" class="ssn" type="text" value="" data-label="ssn1" maxlength="11"/> </div> // SSN validation // trap keypress - only allow numbers $('input.ssn').on('keypress', function(event){ // trap keypress var character = String.fromCharCode(event.which); if(!isInteger(character)){ return false; } }); // checks that an input string is an integer, with an optional +/- sign character function isInteger (s) { if(s === '-') return true; var isInteger_re = /^\s*(\+|-)?\d+\s*$/; return String(s).search (isInteger_re) != -1 } // format SSN $('input.ssn').on('keyup', function(){ var val = this.value.replace(/\D/g, ''); var newVal = ''; if(val.length > 4) { this.value = val; } if((val.length > 3) && (val.length < 6)) { newVal += val.substr(0, 3) + '-'; val = val.substr(3); } if (val.length > 5) { newVal += val.substr(0, 3) + '-'; newVal += val.substr(3, 2) + '-'; val = val.substr(5); } newVal += val; this.value = newVal; });En su controlador de teclado, solo reemplace la entrada si el valor ha cambiado (lo que no ocurre con Ctrl-A, etc.)
// SSN validation // trap keypress - only allow numbers $('input.ssn').on('keypress', function(event){ // trap keypress var character = String.fromCharCode(event.which); if(!isInteger(character)){ return false; } }); // checks that an input string is an integer, with an optional +/- sign character function isInteger (s) { if(s === '-') return true; var isInteger_re = /^\s*(\+|-)?\d+\s*$/; return String(s).search (isInteger_re) != -1 } // format SSN $('input.ssn').on('keyup', function(){ var val = this.value.replace(/\D/g, ''); var newVal = ''; // I'm not sure what this is for, but it updates the field perhaps unnecessarily // if(val.length > 4) { // this.value = val; // } if((val.length > 3) && (val.length < 6)) { newVal += val.substr(0, 3) + '-'; val = val.substr(3); } if (val.length > 5) { newVal += val.substr(0, 3) + '-'; newVal += val.substr(3, 2) + '-'; val = val.substr(5); } newVal += val; if (this.value != newVal) { // only update the field if its content has changed this.value = newVal; } }); input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } .error-border { border: 2px solid #dadada; border-radius: 7px; } .error-border:focus { outline: none; border-color: #F00; box-shadow: 0 0 10px #F00; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="u22" class="ax_text_field"> <input id="u22_input" class="ssn" type="text" value="" data-label="ssn1" maxlength="11"/> </div>